<template>
  <div>
    <el-form ref="formRef" :model="queryParams" :rules="rules">
      <el-row>
        <el-form-item label="项目名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="赛事名称"
            clearable
            style="width: 800px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item
          label="项目限报人数"
          prop="personLimit"
          style="width: auto"
        >
          <!-- -1不限 -->
          <!-- 限制填人数 -->
          <el-radio-group v-model="queryParams.personLimit" @change="checkFN1">
            <el-radio label="-1">不限</el-radio>
            <el-radio label="0">开启 &nbsp;&nbsp;&nbsp;&nbsp;</el-radio>
          </el-radio-group>
          <el-input
            style="width: 200px"
            type="number"
            v-model="queryParams.xbr"
            :disabled="!show1"
          />
          &nbsp;人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </el-form-item>
        <el-form-item
          label="赛事组别的限报人数"
          prop="cptGroupPersonLimit"
          style="width: auto"
        >
          <!-- -1不限 -->
          <!-- 限制填人数 -->
          <el-radio-group
            v-model="queryParams.cptGroupPersonLimit"
            @change="checkFN2"
          >
            <el-radio label="-1">不限</el-radio>
            <el-radio label="0">开启 &nbsp;&nbsp;&nbsp;&nbsp;</el-radio>
          </el-radio-group>
          <el-input
            style="width: 200px"
            type="number"
            v-model="queryParams.shz"
            :disabled="!show2"
          />
          &nbsp;人
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="是否有其它费用" prop="otherChargeFlag">
          <el-radio-group
            v-model="queryParams.otherChargeFlag"
            @change="changeOther"
          >
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="是否计入兼项"
          prop="intoCompatibleFlag"
          style="margin-left: 30px"
        >
          <el-radio-group v-model="queryParams.intoCompatibleFlag">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row style="line-height: 30px">
        <el-form-item label="项目类型" prop="type">
          <el-select
            v-model="queryParams.type"
            @change="checkFN3"
            placeholder="请选择项目类型"
          >
            <el-option label="个人" value="0" />
            <el-option label="团体" value="1" v-if="signType != 0" />
            <el-option label="团体竞技" value="2" v-if="signType != 0" />
            <el-option label="混双" value="3" v-if="signType != 0" />
            <el-option label="混合团队" value="4" v-if="signType != 0" />
            <el-option label="混合个人" value="5" />
            <el-option label="混合团队竞技" value="6" v-if="signType != 0" />
          </el-select>
          &nbsp;&nbsp;
        </el-form-item>
        <el-select
          v-model="queryParams.groupLimit"
          :disabled="!show3"
          v-if="signType != 0"
        >
          <el-option label="全部" value="-1" />
          <el-option
            v-for="item in options"
            :key="item"
            :label="item + '队'"
            :value="item"
          />

          &nbsp;&nbsp; </el-select
        >&nbsp;&nbsp;
        <el-input
          v-if="signType != 0"
          :disabled="!show3"
          style="width: 200px"
          placeholder="最小报名人数"
          type="number"
          v-model="queryParams.groupPersonMinLimit"
        />&nbsp;&nbsp;<span v-if="signType != 0">人</span> &nbsp;&nbsp;
        <el-input
          v-if="signType != 0"
          :disabled="!show3"
          placeholder="最大报名人数"
          style="width: 200px"
          type="number"
          v-model="queryParams.groupPersonMaxLimit"
        />&nbsp;&nbsp;<span v-if="signType != 0">人</span>
      </el-row>
      <div v-if="showMixture">
        <el-row>
          <el-form-item label="男性人数" prop="maleMinInterval">
            <el-input
              type="number"
              style="width: 200px"
              placeholder="请输入最小报名人数"
              v-model="queryParams.maleMinInterval"
            ></el-input
            >&nbsp;&nbsp; <span>人</span>&nbsp;&nbsp;
            <el-input
              type="number"
              style="width: 200px"
              placeholder="请输入最大报名人数"
              v-model="queryParams.maleMaxInterval"
            ></el-input>
            &nbsp;&nbsp; <span>人</span>&nbsp;&nbsp;
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="女性人数" prop="femaleMinInterval">
            <el-input
              type="number"
              style="width: 200px"
              placeholder="请输入最小报名人数"
              v-model="queryParams.femaleMinInterval"
            ></el-input>
            &nbsp;&nbsp; <span>人</span>&nbsp;&nbsp;

            <el-input
              type="number"
              style="width: 200px"
              placeholder="请输入最大报名人数"
              v-model="queryParams.femaleMaxInterval"
            ></el-input>
          </el-form-item>
          &nbsp;&nbsp; <span>人</span>&nbsp;&nbsp;
        </el-row>
      </div>

      <el-row>
        <el-form-item label="是否有队伍费用" prop="teamChargeFlag">
          <el-radio-group v-model="queryParams.teamChargeFlag">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="是否有组别" prop="hasNext">
          <el-radio-group v-model="queryParams.hasNext">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item
          label="该项目允许一人报"
          prop="eachSignLimit"
          style="width: auto"
        >
          <el-input
            style="width: 200px"
            type="number"
            v-model="queryParams.eachSignLimit"
          />
          &nbsp;&nbsp;项
        </el-form-item>
      </el-row>
    </el-form>
    <el-row justify="center">
      <el-button type="primary" @click="submitFN">保存</el-button>
      <el-button type="primary" @click="nextStep(queryParams.type)"
        >下一步</el-button
      >
    </el-row>
  </div>
</template>

<script setup>
import { getCurrentInstance } from "@vue/runtime-core";
import { useRoute, useRouter } from "vue-router";
import {
  addList,
  particularsApi,
  UpdateApi,
} from "@/api/match/CompetitionProject.js";
const props = defineProps({
  // 编辑还是添加
  repair: {
    type: String,
  },
  // 项目类型
  signType: {
    type: String,
  },
  // 赛事id
  cptId: {
    type: String,
  },
  // 项目id
  cptProjectId: {
    type: String,
  },
  // 组id
  groupId: {
    type: String,
  },
});
const route = useRoute();
const router = useRouter();
const signType = ref(props.signType);
const { proxy } = getCurrentInstance();
const options = ref([]);
const flag = ref(false);
const type = ref();
const cptProjectId = ref();
const emit = defineEmits(["nextStep"]);
const show1 = ref(false);
const show2 = ref(false);
const show3 = ref(false);
const showMixture = ref(false);
const showOther = ref(false);

let num = "";

const data = reactive({
  queryParams: {
    personLimit: "-1",
    cptGroupPersonLimit: "-1",
    otherChargeFlag: "0",
    intoCompatibleFlag: "0",
    teamChargeFlag: "0",
    groupLimit: "-1",
    type: "0",
    name: null,
    hasNext: "0",
    eachSignLimit: 1,
  },
  form: {},
  rules: {
    name: { required: true, message: "请输入项目名称", trigger: "blur" },
    cptGroupPersonLimit: {
      required: true,
      message: "请输入赛事组别限报人数",
      trigger: "blur",
    },
    otherChargeFlag: {
      required: true,
      message: "请选择是否有其他费用",
      trigger: "blur",
    },
    allowBringOwn: {
      required: true,
      message: "请选择是否有自备",
      trigger: "blur",
    },
    personLimit: {
      required: true,
      message: "请输入限报人数",
      trigger: "blur",
    },
    intoCompatibleFlag: {
      required: true,
      message: "请选择是否计入兼项",
      trigger: "blur",
    },
    type: {
      required: true,
      message: "请选择项目类型",
      trigger: "blur",
    },
    teamChargeFlag: {
      required: true,
      message: "请选择是否有队伍费用",
      trigger: "blur",
    },
    hasNext: {
      required: true,
      message: "请选择是否有组别",
      trigger: "blur",
    },
    eachSignLimit: {
      required: true,
      message: "请输入该项目否允许一人报",
      trigger: "blur",
    },
    maleMinInterval: [
      // {
      //   required: true,
      //   message: "请输入最小报名人数",
      //   trigger: "blur",
      // },
      { validator: validateMin, trigger: "blur" },
    ],
    femaleMinInterval: [
      // {
      //   required: true,
      //   message: "请输入最小报名人数",
      //   trigger: "blur",
      // },
      { validator: validateMin, trigger: "blur" },
    ],
  },
});

const { queryParams, rules, form } = toRefs(data);

// 回显
if (props.cptProjectId) {
  initData();
}
async function initData() {
  form.value.id = props.cptProjectId;
  let res = await particularsApi(form.value);
  queryParams.value = res.data;
  if (queryParams.value.groupPersonMinLimit == -1) {
    queryParams.value.groupPersonMinLimit = null;
  }
  if (queryParams.value.groupPersonMaxLimit == -1) {
    queryParams.value.groupPersonMaxLimit = null;
  }
  if (queryParams.value.femaleMinInterval == -1)
    queryParams.value.femaleMinInterval = null;
  if (queryParams.value.maleMinInterval == -1)
    queryParams.value.maleMinInterval = null;
  // 不是个人
  if (queryParams.value.type != 0) show3.value = true;

  if (queryParams.value.personLimit != -1) {
    queryParams.value.xbr = queryParams.value.personLimit;
    queryParams.value.personLimit = "0";
  } else {
    queryParams.value.personLimit = "" + queryParams.value.personLimit;
  }
  queryParams.value.personLimit == "0"
    ? (show1.value = true)
    : (show1.value = false);
  queryParams.value.groupLimit = "" + queryParams.value.groupLimit;
  if (queryParams.value.cptGroupPersonLimit != -1) {
    queryParams.value.shz = queryParams.value.cptGroupPersonLimit;
    queryParams.value.cptGroupPersonLimit = "0";
  } else {
    queryParams.value.cptGroupPersonLimit =
      "" + queryParams.value.cptGroupPersonLimit;
  }
  queryParams.value.cptGroupPersonLimit == "0"
    ? (show2.value = true)
    : (show2.value = false);
  if (queryParams.value.otherChargeFlag == "1") {
    showOther.value = true;
  }
  if (queryParams.value.type == "4" || queryParams.value.type == "6") {
    showMixture.value = true;
  }
  num = queryParams.value.type;
  console.log(queryParams.value);
}

for (let i = 1; i <= 1000; i++) {
  options.value.push(i);
}

// 自定义表单验证
function validateMin(rule, value, callback) {
  let Mmin = Number(queryParams.value.maleMinInterval);
  let Mmax = Number(queryParams.value.maleMaxInterval);
  let Wmax = Number(queryParams.value.femaleMaxInterval);
  let Wmix = Number(queryParams.value.femaleMinInterval);
  if (Mmin == 0 && Wmax == 0 && Mmax == 0 && Wmix == 0) {
    callback(new Error("请至少输入一个人数"));
  } else {
    callback();
  }
}

// 保存
async function submitFN() {
  return new Promise((resolve, reject) => {
    if (flag.value) return;
    proxy.$refs["formRef"].validate(async (valid) => {
      let res = null;
      // debugger;
      if (valid) {
        if (queryParams.value.personLimit != -1)
          queryParams.value.personLimit = queryParams.value.xbr;
        if (queryParams.value.cptGroupPersonLimit != -1)
          queryParams.value.cptGroupPersonLimit = queryParams.value.shz;
        if (queryParams.value.groupPersonMaxLimit == null)
          queryParams.value.groupPersonMaxLimit = -1;
        if (queryParams.value.groupPersonMinLimit == null)
          queryParams.value.groupPersonMinLimit = -1;
        if (queryParams.value.femaleMinInterval == null)
          queryParams.value.femaleMinInterval = -1;
        if (queryParams.value.maleMinInterval == null)
          queryParams.value.maleMinInterval = -1;

        if (props.cptProjectId) {
          if (num == queryParams.value.type) {
            // 修改
            res = await UpdateApi(queryParams.value);
            if (res.code == 200) {
              router.go(-1);
            } else {
              proxy.$modal.msgError("操作败，请重新操作");
            }
          } else {
            // 项目修改
            proxy.$modal
              .confirm("项目类型修改后将会删除原有的组别，是否修改？")
              .then(async function () {
                res = await UpdateApi(queryParams.value);
                if (res.code == 200) {
                  router.go(-1);
                } else {
                  proxy.$modal.msgError("操作败，请重新操作");
                }
              });
          }
        } else {
          // 添加
          queryParams.value.cptId = props.cptId;
          res = await addList(queryParams.value);
        }
        if (res.code == 200) {
          cptProjectId.value = res.data;
          proxy.$modal.msgSuccess("操作成功");
          if (
            queryParams.value.type == 0 ||
            queryParams.value.groupPersonMinLimit == -1 ||
            queryParams.value.groupPersonMaxLimit == -1
          ) {
            queryParams.value.groupPersonMinLimit = null;
            queryParams.value.groupPersonMaxLimit = null;
          }
          if (queryParams.value.femaleMinInterval == -1)
            queryParams.value.femaleMinInterval = null;
          if (queryParams.value.maleMinInterval == -1)
            queryParams.value.maleMinInterval = null;

          if (queryParams.value.hasNext == 0) {
            router.go(-1);
          }
          type.value = 3;
          flag.value = true;
        } else {
          proxy.$modal.msgError("操作败，请重新操作");
        }
      } else {
        proxy.$modal.msgError("请完善信息");
      }
      if (flag.value) {
        resolve("成功");
      } else {
        reject("失败");
      }
    });
  });
}

function checkFN1(val) {
  if (val == 0) {
    show1.value = true;
  } else {
    queryParams.value.xbr = "";
    show1.value = false;
  }
}

function changeOther(e) {
  if (e == 1) {
    showOther.value = true;
    queryParams.value.allowBringOwn = "0";
  } else {
    showOther.value = false;
  }
  console.log(e);
}

function checkFN2(val) {
  if (val == 0) {
    show2.value = true;
  } else {
    queryParams.value.shz = "";
    show2.value = false;
  }
}

function checkFN3(val) {
  queryParams.value.groupPersonMaxLimit = null;
  queryParams.value.groupPersonMinLimit = null;
  queryParams.value.femaleMaxInterval = null;
  queryParams.value.femaleMinInterval = null;
  queryParams.value.maleMaxInterval = null;
  queryParams.value.maleMinInterval = null;
  if (val == 0 || val == 5) {
    show3.value = false;
    queryParams.value.groupLimit = "-1";
  } else {
    show3.value = true;
  }
  if (val == 4 || val == 6) {
    // 混合团体竞技，团体竞技，限制男女
    showMixture.value = true;
  } else {
    showMixture.value = false;
  }
}

async function nextStep() {
  if (props.repair != 0) {
    if (flag.value) {
      router.go(-1);
    } else {
      await submitFN();
      if (flag.value) router.go(-1);
    }
  } else {
    if (flag.value) {
      emit(
        "nextStep",
        1,
        cptProjectId.value,
        queryParams.value.type,
        cptProjectId.value,
        props.groupId
      );
    } else {
      await submitFN();
      if (flag.value)
        emit(
          "nextStep",
          1,
          cptProjectId.value,
          queryParams.value.type,
          cptProjectId.value,
          props.groupId
        );
    }
  }
}
</script>

<style scope>
.el-row {
  border: 0;
}
</style>
